<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <child content="Dell"></child>
    <child content="Lee"></child>
</div>
<script>
    Vue.prototype.bus=new Vue();

    Vue.component('child',{
        props:{
            content:String
        },
        data:function(){
          return {
              changeContent:this.content
          }
        },
        template:'<div @click="handleClick">{{changeContent}}</div>',
        methods:{
            handleClick:function () {
                this.bus.$emit("change",this.content);
            }
        },
        mounted:function () {
            let this_=this;
            this.bus.$on("change",function (msg) {
                this_.changeContent=msg;
            });
        }
    });
    let vm = new Vue({
        el: '#app',
    });
</script>
</body>
</html>